<template>
  <RelationWrap
      :auth="getAuth()"
      :rowIndex="rowIndex"
      :formModel="formModel"
      :rowId="rowId"
      :context="context"
      :subFormId="subFormId"
      :fieldConfig="fieldConfig"
      ref="relationWrap">
    <template #field="{isLink}">
      <render :isLink="isLink"/>
    </template>
  </RelationWrap>
</template>
<script setup>
import {createProps} from '@/utils';
import {h, nextTick, shallowRef} from 'vue';
import Constants from '@comp/FormEngine/Constants';
import FieldRegistry from '@comp/FormEngine/field/FieldRegistry';
import {AuthType} from '@comp/FormEngine/Constants';
import RelationWrap from '@comp/FormEngine/field/relation/RelationWrap.vue';

defineOptions({name: 'FieldDelegate'});

const props = defineProps({
  context: createProps(Object, () => undefined),
  fieldConfig: createProps(Object, () => undefined),
  formModel: createProps(Object, () => undefined),
  rowIndex: createProps(Number, undefined),
  forceDetail: createProps(Boolean),
  subFormId: createProps(String),
  rowId: createProps(String),
});
const relationWrap = shallowRef();

function render({isLink}) {
  if (!props.fieldConfig || !props.context) return undefined;
  let comp = FieldRegistry[props.fieldConfig.component];
  return comp && renderField(comp, isLink) || undefined;
}

function renderField(comp, isLink) {
  if (props.formModel[Constants.authFieldName][props.fieldConfig.fieldName] === 'hide') return;
  let auth = getAuth();
  return props.formModel && h(comp, {
    value: props.formModel[props.fieldConfig.fieldName],
    title: props.fieldConfig.fieldTitleName && props.formModel[props.fieldConfig.fieldTitleName] || undefined,
    auth,
    isLink,
    fieldConfig: props.fieldConfig,
    rowIndex: props.rowIndex,
    subFormId: props.subFormId,
    formModel: props.formModel,
    rootFormModel: props.context && props.context.formModel,
    context: props.context,
    id: props.fieldConfig.id,
    showLabel: props.context?.showLabel() || false,
    required: props.formModel[Constants.requiredFieldName][props.fieldConfig.fieldName],
    class: {
      'form-field-required': props.formModel[Constants.requiredFieldName][props.fieldConfig.fieldName]
          && props.formModel[props.fieldConfig.fieldName] !== 0
          && !props.formModel[props.fieldConfig.fieldName],
    },
    // 'onFocus': () => props.createFocusData(),
    // 'onBlur': () => props.clearFocusData(),
    'onUpdate': () => props.context && props.context.formFieldUpdate && nextTick(() => {
      props.context.formFieldUpdate(props.fieldConfig, props.rowId);
    }),
    onOpenRelationForm: () => relationWrap.value.openRelationForm(),
    'onUpdate:value': v => props.formModel[props.fieldConfig.fieldName] = v,
    'onUpdate:title': t => props.fieldConfig.fieldTitleName && (props.formModel[props.fieldConfig.fieldTitleName] = t),

  }) || undefined;
}

function getAuth() {
  let res = props.formModel[Constants.authFieldName][props.fieldConfig.fieldName];
  if ((props.context.forceDetail || props.forceDetail) && res === AuthType.edit) {
    return AuthType.browse;
  }
  return res;
}
</script>
<style scoped lang="scss">

</style>